<template>
  <div class="Setting_box">
    <div class="setting">
      <div class="header">
        <button @click="manage" :style="data.smanage">管理系统介绍</button>
        <button @click="revise" :style="data.srevise">密码修改</button>
        <button @click="quit" :style="data.squit">退出</button>
      </div>
      <div class="main">
        <div class="title" v-if="data.title">
          <h2>爱小厨介绍</h2>
          <p>1、软件的一切功能运作简易、利于运作，可即时助力老板处理问题。</p>
          <p>2、可按各种时间段对各种分类的数据分析展开查阅和分析，让老板掌控一切的数据分析变化。</p>
          <p>3、可对會員、产品信息、销售额等随时展开检索搜索，通过各种分类展开筛选查找方便快捷。</p>
          <p>4、对各种等级的员工所设立的管理权限也不一样，能自由分配员工管理权限。</p>
          <p>5、凭借后台管理数据分析图标功能，更加的直观的熟知商品销售情况和营销推广情况。</p>
          <p>6、系统软件稳定且安全，能即时对数据分析展开云备份，能有效的保障老板的数据不会丢失。</p>
        </div>
        <div class="revise" v-if="data.revised">
          <h2>密码修改</h2>
          <div>
            <span>请输入原密码:</span>
            <input type="password" v-model="ordpassword" />
          </div>
          <div>
            <span>请输入新密码:</span>
            <input type="password" v-model="newpassword" />
          </div>
          <div>
            <span>再次确认密码:</span>
            <input type="password" v-model="surepassword" />
          </div>
          <div class="sure">
            <button @click="sure">确认修改</button>
          </div>
        </div>
        <div class="quit" v-if="data.quited">
          <h2>退出登录</h2>
          <button>是否退出此账号?</button>
          <br />
          <button @click="yes">是</button>
          <button @click="no">否</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const ordpassword = ref("");
    const newpassword = ref("");
    const surepassword = ref("");
    const data = reactive({
      role: "123",
      title: true,
      revised: false,
      quited: false,

      // 样式
      smanage: {
        backgroundColor: "darksalmon",
      },
      srevise: {
        backgroundColor: "",
      },
      squit: {
        backgroundColor: "",
      },
    });

    function manage() {
      (data.title = true), (data.revised = false), (data.quited = false);
      data.smanage.backgroundColor = "darksalmon";
      data.srevise.backgroundColor = "coral";
      data.squit.backgroundColor = "coral";
    }
    function revise() {
      (data.revised = true), (data.title = false);
      data.quited = false;
      data.smanage.backgroundColor = "coral";
      data.srevise.backgroundColor = "darksalmon";
      data.squit.backgroundColor = "coral";
    }
    function quit() {
      (data.revised = false), (data.title = false);
      data.quited = true;
      data.smanage.backgroundColor = "coral";
      data.srevise.backgroundColor = "coral";
      data.squit.backgroundColor = "darksalmon";
    }
    // 修改密码
    function sure() {
      // console.log(sessionStorage.getItem("password"));
      if (ordpassword.value == sessionStorage.getItem("password")) {
        axios({
          method: "post",
          url: "http://120.76.246.120:4455/Sapi/super/modifypwd",
          data: { username: newpassword.value, password: surepassword.value },
        }).then((res) => {
          console.log(res);
          if (newpassword.value == surepassword.value) {
            if (res.data == "OK") {
              ElMessage({
                message: "修改成功",
                type: "success",
              });
              sessionStorage.setItem("password", newpassword.value),
                (ordpassword.value = "");
              newpassword.value = "";
              surepassword.value = "";
            } else {
              ElMessage({
                message: "网络出了点小问题",
                type: "error",
              });
              ordpassword.value = "";
              newpassword.value = "";
              surepassword.value = "";
            }
          } else {
            ElMessage({
              message: "两次密码不一致",
              type: "warning",
            });
            ordpassword.value = "";
            newpassword.value = "";
            surepassword.value = "";
          }
        });
      } else {
        ElMessage({
          message: "原密码不对",
          type: "warning",
        });
        ordpassword.value = "";
        newpassword.value = "";
        surepassword.value = "";
      }
    }
    // 退出
    function yes() {
      // 回到登录页
      router.push({
        name: "login",
      });
      // 清除后台缓存
      sessionStorage.removeItem("username");
      sessionStorage.removeItem("password");
      ElMessage({
        message: "退出成功",
        type: "success",
      });
    }
    return {
      data,
      manage,
      revise,
      quit,
      sure,
      yes,
      ordpassword,
      newpassword,
      surepassword,
    };
  },
};
</script>



<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.aa {
  height: 100px;
}
.Setting_box {
  margin: 20px 10px 0 0;
  width: 100%;
  background-color: #fff;
}
.setting {
  padding: 20px;
  > .header {
    width: 100%;
    height: 50px;
    text-align: left;
    > button {
      width: 150px;
      height: 50px;
      border-radius: 5px;
      border: none;
      background-color: coral;
      margin-right: 3px;
    }
  }
}
h2 {
  font-weight: 500;
  margin-bottom: 50px;
}

.main {
  width: 100%;
  height: 500px;
  margin-top: 20px;
  padding-top: 30px;
  .title {
    > p {
      text-align: left;
      margin-bottom: 20px;
    }
  }
  .revise {
    input {
      width: 200px;
      height: 30px;
      outline: none;
      margin-bottom: 20px;
      margin-left: 10px;
    }
    > .sure {
      > button {
        width: 150px;
        height: 30px;
      }
    }
  }
  > .quit {
    > button:nth-of-type(1) {
      border: none;
      width: 200px;
      height: 50px;
      background-color: #42b983;
      margin-bottom: 50px;
      font-size: 18px;
      color: white;
    }
    > button:nth-of-type(2),
    > button:nth-of-type(3) {
      width: 70px;
      height: 40px;
      background-color: white;
      border-radius: 5px;
      color: #606266;
      border: 1px solid #dcdfe6;
      font-size: 17px;
      &:hover {
        border: 1px solid #409eff;
        color: #409eff;
      }
    }
    > button:nth-of-type(3) {
      margin-left: 30px;
    }
  }
}
</style>
